<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!doctype html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="icon" href="${path}/LeisureSeeker/icons/favicon.ico" sizes="16x16"/>
    <title>Seeker地图</title>
    <style type="text/css">

    </style>
    <style type="text/css">
        html, body, #container {
            width: 100%;
            height: 100%;
        }

        .btn{
            width:10rem;
            margin-left:6.8rem;
        }

        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 5px;
            right: 10px;
            width: 280px;
        }

        #panel .amap-call {
            background-color: #009cf9;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        #panel .amap-lib-driving {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.14&key=e81e352f4489270819adc173133718c0&plugin=AMap.Driving,AMap.Geocoder"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div class="input-card" style='width:25rem;left: 15px;bottom: 50px'>
    <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text" >出发地</span></div>
        <input type="text" class="" id="src-place" placeholder="请输入起点" list="dataList1" name="dataList1"/>
        <datalist id="dataList1">
        </datalist>
    </div>
    <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text" >目的地</span></div>
        <input type="text" class="" id="des-place" placeholder="请输入终点" list="dataList2" name="dataList2"/>
        <datalist id="dataList2">
        </datalist>
    </div>
    <div class="input-item">
        <input type="button" class="btn" id="search-place" value="生成路线">&nbsp&nbsp&nbsp&nbsp
        <input type="button" class="btn" id="search-nearby" value="显示周围热门地点">
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    //基本地图加载
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [118.11847888916016, 24.505784341291328],//地图中心点
        zoom: 12 //地图显示的缩放级别
    });
    //构造路线导航类
    var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    });
    /*driving.search([
        /!*{keyword: '厦门北站', city: '厦门'},
        {keyword: '天河机场', city: '武汉'}*!/
        {keyword: '', city: ''},
        {keyword: '', city: ''}
    ], function (status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
            log.success('绘制驾车路线完成')
        } else {
            log.error('获取驾车数据失败：' + result)
        }
    });
    */
    // 获取出发地输入提示信息
    function autoInput1(){
        var keywords = document.getElementById("src-place").value;
        AMap.plugin('AMap.Autocomplete', function(){
            // 实例化Autocomplete
            var autoOptions = {
                city: '全国'
            }
            var autoComplete = new AMap.Autocomplete(autoOptions);
            autoComplete.search(keywords, function(status, result) {
                // 搜索成功时，result即是对应的匹配数据
                /* var node = new PrettyJSON.view.Node({
                     el: document.querySelector("#input-info"),
                     data: result
                 });*/
                /*console.log(result.tips);*/
                for (var i = 0; i < result.tips.length; i++) {
                    console.log(result.tips[i].name);
                    /*unitObj.options.add(new Option(result.tips[i].name, result.tips[i].name));*/
                    $("#dataList1").append('<option value="'+result.tips[i].name+'">'+result.tips[i].district+'-'+result.tips[i].address+'</option>');
                }
            })
        })
    }
    // 获取目的地输入提示信息
    function autoInput2(){
        var keywords = document.getElementById("des-place").value;
        AMap.plugin('AMap.Autocomplete', function(){
            // 实例化Autocomplete
            var autoOptions = {
                city: '全国'
            }
            var autoComplete = new AMap.Autocomplete(autoOptions);
            autoComplete.search(keywords, function(status, result) {
                // 搜索成功时，result即是对应的匹配数据
                /* var node = new PrettyJSON.view.Node({
                     el: document.querySelector("#input-info"),
                     data: result
                 });*/
                /*console.log(result.tips);*/
                if(result.tips!=null){
                    $("#dataList2").empty();
                    for (var i = 0; i < result.tips.length; i++) {
                        /*console.log(result.tips[i].name);*/
                        /*unitObj.options.add(new Option(result.tips[i].name, result.tips[i].name));*/
                        $("#dataList2").append('<option value="'+result.tips[i].name+'">'+result.tips[i].district+'-'+result.tips[i].address+'</option>');
                    }}
            })
        })
    }
    /*autoInput();*/
    // document.getElementById("input").oninput = autoInput;
    document.getElementById("src-place").oninput =function () {
        autoInput1();
    }
    document.getElementById("des-place").oninput =function () {
        autoInput2();
    }
</script>
<script>
    $('#search-place').on('click',function () {
        var begin=$("#src-place").val();
        var end=$("#des-place").val();
        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [118.11847888916016, 24.505784341291328],//地图中心点
            zoom: 12 //地图显示的缩放级别
        });
        var driving = new AMap.Driving({
            map: map,
            panel: "panel"
        });
        // 根据起终点名称规划驾车导航路线
        driving.search([
            {keyword: begin, city: ''},
            {keyword: end, city: ''}
        ], function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
                log.success('绘制驾车路线完成')
            } else {
                log.error('获取驾车数据失败：' + result)
            }
        });
    });
    //获取目的地周围热门地区
    var geocoder,marker;
    function geoCode() {
        if(!geocoder){
            geocoder = new AMap.Geocoder({
                city: "全国", //城市设为北京，默认：“全国”
            });
        }
        var address  = document.getElementById('des-place').value;
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat = result.geocodes[0].location
                /*console.log(lnglat.Q+","+lnglat.P);*/

                var map = new AMap.Map("container", {
                    resizeEnable: true
                });
                AMap.service(["AMap.PlaceSearch"], function() {
                    //构造地点查询类
                    var placeSearch = new AMap.PlaceSearch({
                        type: '餐饮服务|购物服务|酒店|风景名胜', // 兴趣点类别
                        pageSize: 5, // 单页显示结果条数
                        pageIndex: 1, // 页码
                        city: "全国", // 兴趣点城市
                        citylimit: true,  //是否强制限制在设置的城市内搜索
                        map: map, // 展现结果的地图实例
                        panel: "panel", // 结果列表将在此容器中进行展示。
                        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    });

                    var cpoint = [lnglat.Q,lnglat.P]; //中心点坐标
                    placeSearch.searchNearBy('', cpoint, 200, function(status, result) {

                    });
                });
            }else{
                log.error('根据地址查询位置失败');
            }
        });
    }
    document.getElementById("search-nearby").onclick = geoCode;
</script>
</body>
</html>